<template>
  <div class="upload-doc-container">
    <div class="babel-container">
      <a-upload draggable accept=".docx" @before-upload="beforeUpload" />
    </div>
    <div class="tips-container">
      <label class="tips-item"
        >1、仅支持<b>docx</b>文档的插入，请控制文档的大小在<b>10MB</b>以内，总字数在<b>5000</b>字以内，文档插图在<b>100</b>张以内。</label
      >
      <label class="tips-item">2、文档越大，解析时间越长，请耐心等待。</label>
      <label class="tips-item">3、若文档中存在编辑器所不支持的文本样式（例如公式），将以纯文本展示。</label>
      <label class="tips-item"
        >4、不能保证所有格式（例如公式、代码、表格）都能正确导入，建议导入后检查、确认无误后发布。</label
      >
      <label class="tips-item"
        >5、字数的计算按照<b>字符</b>计算，空格是一个字符，由多个字母组成的英文单词是多个字符。</label
      >
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Message } from '@arco-design/web-vue';
  import { getFileExtension } from '@/utils/fileExtensions';
  import { handleLoad } from '../module/uploadDocx/menu/uploadDocxLoad';
  import { handlePasteHtmlStyle } from '../utils/handleImagesInArticle';

  const emit = defineEmits(['uploadDocxConfirm', 'setLoadingFlag']);
  const props = defineProps(['articleType']);

  // 上传前的校验
  const beforeUpload = (file) => {
    return new Promise((resolve, reject) => {
      const fileExtension = getFileExtension(file.name);
      if (fileExtension !== 'docx') {
        Message.error('仅支持docx文档的插入');
        reject(false);
        return;
      }
      if (file.size > 10 * 1024 * 1024) {
        Message.error('文档大小不能超过10MB');
        reject(false);
        return;
      }
      emit('setLoadingFlag', true);
      // 预览word
      const reader: any = new FileReader();
      reader.onload = async (event) => {
        handleLoad(event, props.articleType == 'order')
          .then(async (htmlContent) => {
            // 处理html文本内容
            const text = await handlePasteHtmlStyle(htmlContent);
            resolve(true);
            // 调用父组件的方法，将HTML内容传递给父组件
            emit('uploadDocxConfirm', text);
            emit('setLoadingFlag', false);
          })
          .catch((error) => {
            // 处理可能发生的错误
            // 根据不同的错误类型显示对应的中文错误消息
            let errorMessage = error.message || '文件解析失败，请导入标准的word文档';
            if (errorMessage.startsWith('Error:')) {
              errorMessage = errorMessage.substring(errorMessage.indexOf('Error:') + 6);
            }
            // 检查是否为特定的错误消息，并转换成中文
            if (
              errorMessage.includes('End of data reached') ||
              errorMessage.includes('https://stuk.github.io/jszip/documentation/howto/read_zip.html')
            ) {
              errorMessage = '文件解析失败，请导入标准的word文档';
            }
            Message.error(errorMessage);
            emit('setLoadingFlag', false);
            reject(false);
          });
      };
      reader.readAsArrayBuffer(file);
    });
  };
</script>
